import {
  Row,
  InputNumber,
  Tabs,
  Button,
  Col,
  Select,
  Switch,
  message,
  Spin,
} from "antd"
import React, { Component } from "react"
import { toJS } from "mobx"
import _ from "lodash"
import LoadChart from "./chart"
const { TabPane } = Tabs

import { inject, observer } from "mobx-react"
import styles from "./index.less"
import IconFont from "component/IconFont"
const { Option } = Select

@inject("ScreenStore")
@observer
class ModalContent extends React.Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }

  render() {
    const {
      relayModuleInfo,
      relayModuleControl,
      updateRelayModuleInfo,
      updateFsuControlInfo,
      relayModuleSet,
      fsuControRecording,
      fsuControl,
      fsuControlInfo,
      loadChartLoading,
    } = this.store

    const relays = relayModuleInfo || []
    const voltages = (fsuControlInfo && fsuControlInfo.voltages) || []
    const recording = (fsuControRecording && fsuControRecording.voltages) || []

    const PrefixZero = (num, n) => {
      return (Array(n).join(0) + num).slice(-n)
    }

    return (
      <div className={"container"}>
        <Tabs
          defaultActiveKey="1"
          className={styles["tabs"]}
          onChange={() => {}}
        >
          <TabPane tab="负载详情" key="1" className={styles["load-tab-pane"]}>
            <Spin spinning={loadChartLoading}>
              <LoadChart />
            </Spin>
          </TabPane>
          <TabPane tab="设置" key="2">
            <div className={styles["modal-content-wrap"]}>
              <div className={styles["down-period-wrap"]}>
                <div className={styles["down-period-title"]}>
                  <span className={styles["text"]}>下电时间段设置</span>
                  <span className={styles["one"]} />
                  <span className={styles["two"]} />
                  <span className={styles["three"]} />
                  <span className={styles["four"]} />
                </div>
                <div className={styles["electricity-wrap"]}>
                  <span className={styles["access-electricity"]}>遥控下电</span>
                </div>
                {relays.map((item, index) => {
                  return (
                    <Row
                      key={index.toString(36) + index}
                      className={styles["down-period-item"]}
                    >
                      <Col span={19}>
                        <div className={styles["item-title"]}>{`${
                          item.name
                        }:`}</div>
                        <div className={styles["item-start-time-wrap"]}>
                          <div className={styles["item-start-time-bg"]}>
                            <span className={styles["one"]} />
                            <span className={styles["two"]} />
                            <span className={styles["three"]} />
                            <span className={styles["four"]} />
                          </div>
                          <Row className={styles["item-start-time"]}>
                            <Col span={11} className={styles["hours"]}>
                              <InputNumber
                                min={0}
                                disabled={item.mode === 1 ? true : false}
                                formatter={(value) =>
                                  !isNaN(value) ? value : 0
                                }
                                max={59}
                                value={item.startHour}
                                onChange={(value) => {
                                  const newItem = {
                                    ...item,
                                    startHour: value || 0,
                                  }
                                  updateRelayModuleInfo(newItem, index)
                                }}
                              />
                            </Col>
                            <Col span={2} className={styles["colon"]}>
                              :
                            </Col>
                            <Col span={11} className={styles["minute"]}>
                              <InputNumber
                                value={item.startMinute}
                                disabled={item.mode === 1 ? true : false}
                                formatter={(value) =>
                                  !isNaN(value) ? value : 0
                                }
                                min={0}
                                max={59}
                                // formatter={(value) => (value ? value : 0)}
                                onChange={(value) => {
                                  const newItem = {
                                    ...item,
                                    startMinute: value || 0,
                                  }
                                  updateRelayModuleInfo(newItem, index)
                                }}
                              />
                            </Col>
                          </Row>
                        </div>
                        <div className={styles["to"]}>至</div>
                        <div className={styles["item-end-time-wrap"]}>
                          <div className={styles["item-end-time-bg"]}>
                            <span className={styles["one"]} />
                            <span className={styles["two"]} />
                            <span className={styles["three"]} />
                            <span className={styles["four"]} />
                          </div>
                          <Row className={styles["item-end-time"]}>
                            <Col span={11} className={styles["hours"]}>
                              <InputNumber
                                disabled={item.mode === 1 ? true : false}
                                min={0}
                                formatter={(value) =>
                                  !isNaN(value) ? value : 0
                                }
                                max={59}
                                value={item.endHour}
                                onChange={(value) => {
                                  const newItem = {
                                    ...item,
                                    endHour: value || 0,
                                  }
                                  updateRelayModuleInfo(newItem, index)
                                }}
                              />
                            </Col>
                            <Col span={2} className={styles["colon"]}>
                              :
                            </Col>
                            <Col span={11} className={styles["minute"]}>
                              <InputNumber
                                disabled={item.mode === 1 ? true : false}
                                formatter={(value) =>
                                  !isNaN(value) ? value : 0
                                }
                                value={item.endMinute}
                                min={0}
                                max={59}
                                // formatter={(value) => (value ? value : 0)}
                                onChange={(value) => {
                                  const newItem = {
                                    ...item,
                                    endMinute: value || 0,
                                  }
                                  updateRelayModuleInfo(newItem, index)
                                }}
                              />
                            </Col>
                          </Row>
                        </div>
                        <div className={styles["confirm-wrap"]}>
                          <div className={styles["confirm-bg"]}>
                            <Button
                              className={styles["text"]}
                              disabled={item.mode === 1 ? true : false}
                              onClick={() => {
                                relayModuleSet({ relays: relayModuleInfo })
                              }}
                            >
                              确认
                            </Button>
                            <span className={styles["one"]} />
                            <span className={styles["two"]} />
                            <span className={styles["three"]} />
                            <span className={styles["four"]} />
                          </div>
                        </div>
                        <div className={styles["interval-operation"]}>
                          <Select
                            suffixIcon={<IconFont type={"iconzhankai"} />}
                            placeholder="请选择遥调方式"
                            value={item.mode || undefined}
                            onChange={async (value) => {
                              const newItem = { ...item, mode: value }
                              const newInfo = relayModuleInfo.map((item, i) => {
                                if (index === i) {
                                  return newItem
                                } else {
                                  return item
                                }
                              })
                              value === 1 &&
                                message.warn(
                                  "手动模式下，您所设置时间区间会失效！"
                                )
                              let res = await relayModuleSet({
                                relays: newInfo,
                              })
                              if (res) {
                                updateRelayModuleInfo(newItem, index)
                              }
                            }}
                          >
                            {[
                              { value: 1, name: "手动模式" },
                              { value: 2, name: "自动模式" },
                            ].map((item, index) => {
                              return (
                                <Option
                                  key={index.toString(36) + index}
                                  value={item.value}
                                >
                                  {item.name}
                                </Option>
                              )
                            })}
                          </Select>
                        </div>
                      </Col>

                      <Col span={4} className={styles["switch-wrap"]}>
                        <Switch
                          disabled={item.mode === 2 ? true : false}
                          checked={item.state !== 0 ? false : true}
                          className={styles["switch"]}
                          onChange={async (value) => {
                            const newItem = { ...item, state: value ? 0 : 1 }
                            let res = await relayModuleControl({
                              state: value ? 0 : 1,
                              adr: index,
                            })
                            if (res && res.result === 0) {
                              updateRelayModuleInfo(newItem, index)
                            }
                          }}
                        />
                      </Col>
                    </Row>
                  )
                })}
              </div>
              <div className={styles["electric-voltage-wrap"]}>
                <div className={styles["electric-voltage-title"]}>
                  <span className={styles["text"]}>下电电压设置</span>
                  <span className={styles["one"]} />
                  <span className={styles["two"]} />
                  <span className={styles["three"]} />
                  <span className={styles["four"]} />
                </div>
                {voltages.map((item, index) => {
                  return (
                    <Row
                      key={index.toString(36) + index}
                      className={styles["electric-voltage-item"]}
                    >
                      <Col span={24}>
                        <div className={styles["item-title"]}>{`${
                          item.name
                        }:`}</div>
                        <div className={styles["to"]}>下电电压</div>
                        <div className={styles["item-start-time-wrap"]}>
                          <div className={styles["item-start-time-bg"]}>
                            <span className={styles["one"]} />
                            <span className={styles["two"]} />
                            <span className={styles["three"]} />
                            <span className={styles["four"]} />
                          </div>
                          <Row className={styles["item-start-time"]}>
                            <Col span={24} className={styles["hours"]}>
                              <InputNumber
                                min={40}
                                max={58}
                                value={item.offValue}
                                formatter={(value) =>
                                  `${
                                    !isNaN(value)
                                      ? value !== ""
                                        ? parseInt(value)
                                        : ""
                                      : 0
                                  }V`
                                }
                                precision={0}
                                parser={(value) => value.replace("V", "")}
                                value={item.offValue}
                                onChange={(value) => {
                                  const newItem = {
                                    ...item,
                                    offValue: value || 40,
                                  }
                                  updateFsuControlInfo(newItem, index)
                                }}
                              />
                            </Col>
                          </Row>
                        </div>
                        <div className={styles["to"]}>上电电压</div>
                        <div className={styles["item-end-time-wrap"]}>
                          <div className={styles["item-end-time-bg"]}>
                            <span className={styles["one"]} />
                            <span className={styles["two"]} />
                            <span className={styles["three"]} />
                            <span className={styles["four"]} />
                          </div>
                          <Row className={styles["item-end-time"]}>
                            <Col span={24} className={styles["hours"]}>
                              <InputNumber
                                min={40}
                                max={58}
                                value={item.onValue}
                                precision={0}
                                formatter={(value) =>
                                  `${
                                    !isNaN(value)
                                      ? value !== ""
                                        ? parseInt(value)
                                        : ""
                                      : 0
                                  }V`
                                }
                                parser={(value) => value.replace("V", "")}
                                onChange={(value) => {
                                  const newItem = {
                                    ...item,
                                    onValue: value || 40,
                                  }
                                  updateFsuControlInfo(newItem, index)
                                }}
                              />
                            </Col>
                          </Row>
                        </div>
                        <div className={styles["confirm-wrap"]}>
                          <div className={styles["confirm-bg"]}>
                            <Button
                              className={styles["text"]}
                              onClick={() => {
                                if (
                                  Number(item.offValue) > Number(item.onValue)
                                ) {
                                  message.error("下电电压必须小于上电电压")
                                  return
                                }
                                let params = {
                                  suId: fsuControlInfo.suId,
                                  sps: [],
                                }
                                params.sps.push({
                                  deviceId: fsuControlInfo.deviceId,
                                  spId: item.offControlSpId,
                                  valueSpId: item.offValueSpId + "",
                                  controlValue: item.offValue + "",
                                })
                                params.sps.push({
                                  deviceId: fsuControlInfo.deviceId,
                                  spId: item.onControlSpId,
                                  valueSpId: item.onValueSpId + "",
                                  controlValue: item.onValue + "",
                                })
                                params.sps[0] && fsuControl(params)
                              }}
                            >
                              确认
                            </Button>
                            <span className={styles["one"]} />
                            <span className={styles["two"]} />
                            <span className={styles["three"]} />
                            <span className={styles["four"]} />
                          </div>
                        </div>
                      </Col>
                    </Row>
                  )
                })}
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
export default ModalContent
